<template>
  <view class="login">
    <block v-if="submit">
      <view class="login-title">
        <view class="login-title-hello"> 您好， </view>
        <view class="login-title-where"> 欢迎登录医修智汇 </view>
      </view>
      <view class="login-admin">
        <uni-forms ref="form">
          <uni-forms-item label="" name="">
            <input
              type="text"
              placeholder="请输入账号"
              v-model="username"
              placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;"
              value=""
            />
          </uni-forms-item>
          <uni-forms-item label="" name="">
            <input
              type="password"
              value=""
              v-model="password"
              placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;"
              placeholder="请输入密码"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
      <button class="login-btn" type="default" @tap="login" :disabled="btn">登录</button>

      <view class="login-xieyi">
        <view>
          <checkbox-group @change="agreeChange">
            <label>
              <checkbox
                value="true"
                :checked="agree == 'true'"
                style="transform: scale(0.7)"
              />勾选代表同意<text
                class="login-xieyi-color"
                @click.stop="handleView('service')"
                >服务协议</text
              >及<text class="login-xieyi-color" @click.stop="handleView('privacy')"
                >隐私协议</text
              >
            </label>
          </checkbox-group>
        </view>
        <view> 登录前请阅读 </view>
      </view>
    </block>
    <block v-else>
      <view class="success-icon">
        <image src="../../static/success.png" mode=""></image>
      </view>
      <view class="success-title"> 资料提交成功 </view>
      <view class="success-time"> 结果将在1-2个工作日反馈 </view>
      <view class="btn-back" @tap="backBtn"> 关闭页面 </view>
    </block>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      submit: true,
      username: "",
      password: "",
      agree: "",
    };
  },
  computed: {
    btn() {
      if (this.username && this.password) {
        return false;
      } else {
        return true;
      }
    },
  },
  onShow: function () {
    // uni.hideHomeButton();
  },
  methods: {
    ...mapMutations(["setStorage"]),
    login() {
      if (this.agree == "true") {
        /* 已注册用户 */
        this.$https
          .post("/user/login", {
            account: this.username,
            password: this.password,
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              duration: 1500,
              icon: "none",
            });
            /* 登录成功 */
            if (res.code == 1) {
              this.setStorage(res.data.userinfo);
              uni.navigateTo({
                url: "../index/index",
              });
            }
          });

        /* uni.getUserProfile({
						desc: "获取个人信息",
						success: (res) => {
							console.log(res, 888);
							this.setStorage(res.userInfo)
							console.log(this.$store.state);
							uni.login({
								provider: 'weixin',
								success: res1 => {
									console.log(res1, 777);
								}
							})
						}
					}) */
        /* uni.navigateTo({
						url:'../index/index'
					}) */
      } else {
        uni.showToast({
          title: "请阅读并同意服务协议",
          icon: "none",
        });
      }
    },
    // 同意协议
    agreeChange(e) {
      if (e.detail.value.length == 0) {
        this.agree = "";
      } else {
        this.agree = e.detail.value[0];
      }
    },
    // 查看协议
    handleView(val) {
      uni.navigateTo({
        url: `/pages/protocol/protocol?type=${val}`,
      });
    },
    backBtn() {
      this.submit = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.success-icon {
  width: 160rpx;
  height: 160rpx;
  margin: auto;
  margin-top: 250rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.success-title {
  font-size: 40rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #434343;
  margin: 16rpx 0;
  text-align: center;
}

.success-time {
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #646466;
  margin: 0 0 100rpx;
  width: 100%;
  text-align: center;
}

.btn-back {
  width: 670rpx;
  height: 96rpx;
  background: $public-oclor;
  color: #ffffff;
  font-size: 32rpx;
  line-height: 96rpx;
  text-align: center;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  margin: auto;
  border-radius: 48rpx;
}

button[disabled][type="default"] {
  background-color: #acc8ff;
  color: #ffffff;
}

.login {
  width: 100%;

  &-title {
    width: 100%;
    margin: 48rpx 0 0 64rpx;
    color: #303030;

    &-hello {
      font-weight: 500;
      font-size: 64rpx;
    }

    &-where {
      line-height: 68rpx;
      font-size: 32rpx;
    }
  }

  &-user {
    padding: 0 64rpx;
    color: #979797;

    &-hospital {
      margin-top: 80rpx;
      position: relative;

      input {
        border-bottom: 2rpx solid #edeef2;
      }

      &-hospitalList {
        position: absolute;
        top: 50rpx;
        width: 100%;
        z-index: 99;
        background-color: #ffffff;
        border: 2rpx solid #fafafa;

        &-child {
          line-height: 50rpx;
        }
      }
    }

    &-rules {
      font-size: 24rpx;
      margin: 30rpx 0 60rpx;

      &-href {
        color: $public-oclor;
        border-bottom: 2rpx solid $public-oclor;
      }
    }
  }

  &-admin {
    margin: 0rpx 64rpx;

    input {
      border-bottom: 2rpx solid #edeef2;
      margin-top: 66rpx;
    }
  }

  &-btn {
    margin: 0 64rpx;
    height: 96rpx;
    border-radius: 48rpx;
    font-size: 32rpx;
    line-height: 96rpx;
    color: #fff;
    background-color: #1a66ff;
    margin-top: 70rpx;
  }

  &-btn::after {
    border: none;
  }

  &-xieyi {
    width: 100%;
    position: absolute;
    bottom: 50rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #646466;
    font-size: 22rpx;
    line-height: 40rpx;

    &-color {
      color: $public-oclor;
    }
  }
}
</style>
